<template>
	<el-form-item label-width="120px">
		<div v-if="switchTitle" slot="label" style="text-align: left;">
			{{ switchTitle }}
		</div>
		<div v-else slot="label" style="text-align: center;">
			{{ $t('dxn.service_manager.switch_title') }}
		</div>
		<el-switch
			:disabled="!hasPermission(permissionId)"
			:value="configData.configStatus"
			:active-value="1"
			:inactive-value="0"
			@change="handleChangeSwitch"
		></el-switch>
	</el-form-item>
</template>

<script>
export default {
	props: {
		permissionId: {
			type: String,
			required: true
		},
		configData: {
			type: Object,
			required: true
		},
		switchTitle: {
			type: String,
			default: ''
		}
	},
	methods: {
		handleChangeSwitch(val) {
			this.$confirm(
				`${
					val
						? this.$t('dxn.confirm_start_up')
						: this.$t('dxn.confirm_close')
				}`,
				this.$t('common.components.tip'),
				{
					confirmButtonText: this.$t('common.sure'),
					cancelButtonText: this.$t('common.cancel'),
					type: 'warning'
				}
			)
				.then(() => {
					if (!this.configData.configId) {
						this.$message.error(
							this.$t('dxn.service_manager.config_not_exist_tips')
						)
						return
					}
					const params = {
						id: this.configData.configId,
						toggleVal: val
					}
					this.$api
						.updateConfigToggleBend(params)
						.then((res) => {
							if (res?.code === 200) {
								this.$message.success(
									val
										? this.$t('dxn.game_rule.open_success')
										: this.$t('dxn.game_rule.close_success')
								)
								this.$emit('getTypeValueAddedConfig')
							}
						})
						.catch(() => {})
				})
				.catch(() => {
					this.$message({
						type: 'info',
						message: '已取消'
					})
				})
		}
	}
}
</script>

<style lang="scss" scoped>
.status-lable {
	line-height: 1.2;
}
</style>
